<template>
  <div class="checkout-steps">
    <div class="payNav">
      <span>请选择支付方式</span>
    </div>
    <van-radio-group class="payGrop" v-model="checked">
      <div class="payGrop555">
        <van-radio class="pay1radio" name="1" icon-size="18px" checked-color="#ab2b2b" @click="p1radio">
          <van-cell class="title5" size="large">

            <img class="title5img" src="@/assets/pay2.jpg" />
          </van-cell>
        </van-radio>
      </div>
      <div class="payGrop444">
        <van-radio class="pay2radio" name="2" icon-size="18px" checked-color="#ab2b2b" @click="p2radio">
          <van-cell class="title5" size="large">

            <img class="title6img" src="@/assets/pay3.jpg" />
          </van-cell>
        </van-radio>
      </div>

    </van-radio-group>
    <!-- Dialog 弹出框 -->
    <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }" @close="dddd">

      <qrcode-vue class="qrcode" :value=Url :size="150" level="H"></qrcode-vue>
    </van-popup>



    <!-- //确定 -->
    <div class="payfotter">
      <button class="paybtn" @click="handlePay">确认</button>
    </div>

  </div>
</template>
<script lang='ts' >
import { defineComponent } from 'vue';
import QrcodeVue from 'qrcode.vue'
export default defineComponent({
  name: 'Pay',
  components: {
    QrcodeVue
  }
})
</script>
<script setup lang='ts'>
import { Toast } from 'vant'
import { ref, watch } from 'vue'
// 引入接口
import { reqSubPay, reqPayStatus } from '@/api/modules/pay'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
let ddd = route.query
//弹框
const show = ref(false)
//单选
const checked = ref('1');
//点击单选框
const p1radio = () => {
  checked.value = '1'
}
const p2radio = () => {
  checked.value = '2'
}

// 获取路由传递过来的订单编号
const Url = ref()
//支付中
const id = ref()
//成功
const code = ref()

async function sub() {
  // 获取订单支付信息
  const result = await reqSubPay(ddd.id as string)
  console.log(result)
  Url.value = result.codeUrl
  id.value = result.orderId
}
sub()
let timer: number | undefined
const handlePay = async () => {
  show.value = true
  
  if (show.value) {
    // 定时

    // 发起心跳请求
    timer = setInterval(async () => {
      // 请求订单支付状态
      const result = await reqPayStatus(ddd.id as string)
      console.log(result.code)
      code.value = result.code
      if (code.value === 200) {
        Toast.success('支付成功')
        show.value = false
        clearInterval(timer)
        router.replace({name:'cart'})
      } else if (code.value == 205) {
        Toast.clear
      } else {
        clearInterval(timer)
        Toast.fail('支付失败')
      }
    }, 3000)
  } 
}
async function dddd() {
  clearInterval(timer)
}

</script>

<style lang='scss' scoped>
.qrcode {
  margin-left: 100px;
  margin-top: 10px;
}

.pay1radio {
  position: absolute;
  // margin-top: -20px;
  z-index: 99;
  margin-left: 15px;
}

.pay2radio {
  padding-bottom: 20px;
  position: absolute;
  margin-bottom: 20px;
  margin-top: -5px !important;
  z-index: 99;
  margin-left: 15px;
}

.payGrop {
  position: relative;
  display: flex;
  flex-direction: column;

  .payGrop555 {
    width: 375px;
    height: 50px;
  }

  .payGrop444 {
    vertical-align: middle;
    width: 375px;
    height: 50px;
  }
}

.title5 {
  margin-top: 10px;
  padding-left: 30px;
  justify-items: center;
  align-items: center;

}

.title6img {
  height: 30px;

}

.title5img {
  padding-left: 6px;
  height: 20px;
}

html {
  height: 100%;
  position: relative;
}

.payfotter {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 4;
  width: 375px;
  height: 80px;
  font-size: 14px;
  align-items: center;
  line-height: 40px;
  color: #FFFFFF;

  .paybtn {
    width: 375px;
    height: 60px;
    background-color: #DD1A21;
    border: 2px solid #DD1A21;
    overflow: hidden
  }

}

.payNav {
  width: 360px;
  height: 24px;
  font-size: 10px;
  line-height: 24px;
  margin: 10px 0;
  padding: 0 0 0 30px;
}

.checkout-steps {
  height: 100%;

}

.step-cont {
  display: flex;
  flex-direction: column;
}
</style>